<template>
    <div class="square-page">
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
export default {
    name:'square',
    data(){
        return{
            transitionName:''
        }
    },
    watch:{
        '$route'(to,from){
            this.transitionName = true ? 'slide-right' : 'slide-left'
        }
    }
}
</script>
<style lang="less">
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  transform: translate(-30px, 0);
}
</style>



